<?xml version='1.0' encoding='ISO-8859-1' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<f:view encoding="ISO-8859-1">
	<h:body>

		<ui:composition template="templates/modelo.xhtml">
			<ui:define name="header">
				<header class="header">
					<div class="container">
						<div class="profile-content pull-left">
							<h1 class="name">Biblioteca Pessoal</h1>
							<ul class="social list-inline">
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								<li><a href="#"><i class="fa fa-github"></i></a></li>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-bitbucket"></i></a></li>
							</ul>
						</div>
						<!--//profile-->

						<h:form id="formCadastro">
							<h:commandLink styleClass="btn btn-cta-primary pull-right"
								value="Login" action="login?faces-redirect=true" />
						</h:form>
					</div>
					<!--//container-->
				</header>
				<!--//header-->
			</ui:define>

			<ui:define name="content">
				<div class="container sections-wrapper">
					<div class="row">
						<div class="primary">
							<section class="about section">
								<div class="section-inner">
									<h2 class="heading">Cadastro</h2>
									<div class="content">
										<h:form id="form" onsubmit="return validarCampos(this)">


											<h:messages />
											<h:outputText value="#{usuarioMB.mensagem}"
												rendered="#{usuarioMB.comMensagem}" style="color: #FF0000"></h:outputText>

											<div class="form-group" id="divNome">
												<h:outputLabel id="labelNome" for="nome" value="Nome" />

												<h:inputText id="nome" styleClass="form-control"
													value="#{usuarioCRUDMB.novo.nome}" required="true"
													size="100" />
											</div>
											<div>
												<span id="nomeError" style="color: red;"></span>
											</div>

											<div class="form-group">
												<h:outputLabel id="labelLogin" for="login" value="Login" />

												<h:inputText id="login" styleClass="form-control"
													value="#{usuarioCRUDMB.novo.login}" required="true"
													size="100" />
											</div>
											<div>
												<span id="loginError" style="color: red;"></span>
											</div>

											<div class="form-group">
												<h:outputLabel id="labelSenha" for="senha" value="Senha" />
												<h:inputSecret id="senha" styleClass="form-control"
													value="#{usuarioCRUDMB.novo.senha}" required="true"
													size="100" />
											</div>
											<div>
												<span id="senhaError" style="color: red;"></span>
											</div>

											<div class="form-group">
												<h:outputLabel id="labelConfirmaSenha" for="confirmaSenha"
													value="Confirmar Senha" />
												<h:inputSecret id="confirmaSenha" styleClass="form-control"
													value="#{usuarioCRUDMB.confirmaSenha}" required="true"
													size="100" />
											</div>
											<div>
												<span id="confirmaSenhaError" style="color: red;"></span>
											</div>


											<div class="form-group">
												<h:outputLabel id="labelEmail" for="email" value="Email" />

												<h:inputText id="email" styleClass="form-control"
													value="#{usuarioCRUDMB.novo.email}" required="true"
													size="100" />
											</div>
											<div>
												<span id="emailError" style="color: red;"></span>
											</div>

											<hr class="divider" />
											<div class="input-group">
												<h:commandButton id="botao"
													styleClass="btn btn-cta-secondary" value="Salvar"
													action="#{usuarioCRUDMB.cadastrarUsuario}" />
											</div>

										</h:form>
									</div><!--//content-->
								</div><!--//section-inner-->
							</section><!--//section-->
						</div>
					</div>
				</div>
			</ui:define>
		</ui:composition>
	</h:body>
</f:view>
</html>